<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>多组超具创意的CSS3开关切换按钮DEMO演示</title>

		<link rel="stylesheet" href="css/normalize.min.css">
		<link rel="stylesheet" href="css/style.css">

	</head>

	<body>

		<h1>A bunch of funky CSS3 Toggle Buttons <a href="https://twitter.com/AshNolan_" target="blank">created by @AshNolan_</a></h1>

		<h2 class="headingOuter">Day/Night Toggle</h2>
		<div class="toggle toggle--daynight">
			<input type="checkbox" id="toggle--daynight" class="toggle--checkbox">
			<label class="toggle--btn" for="toggle--daynight"><span class="toggle--feature"></span></label>
		</div>

		<!-- Inspiration – https://dribbble.com/shots/1836048-Emojis-Pt-1?list=searches&offset=3 -->
		<h2 class="headingOuter">Like Toggle</h2>
		<div class="toggle toggle--like">
			<input type="checkbox" id="toggle--like" class="toggle--checkbox">
			<label class="toggle--btn" for="toggle--like"><span class="toggle--feature"></span></label>
		</div>

		<!-- Inspiration – https://dribbble.com/shots/408190-Quick-Setting-Toggles?list=searches&tag=toggle_button&offset=0 -->
		<h2 class="headingOuter">Shadow Effect Toggle</h2>
		<div class="toggle toggle--text">
			<input type="checkbox" id="toggle--text" class="toggle--checkbox">
			<label class="toggle--btn" for="toggle--text" data-label-on="on" data-label-off="off"></label>
		</div>

		<!-- Inspiration – https://dribbble.com/shots/712038-Button?list=searches&tag=toggle_buttons&offset=23 -->
		<h2 class="headingOuter">3d Power button toggles</h2>
		<div class="toggle toggle--push">
			<input type="checkbox" id="toggle--push" class="toggle--checkbox">
			<label class="toggle--btn" for="toggle--push" data-label-on="on" data-label-off="off"></label>
		</div>
		<div class="toggle toggle--push toggle--push--glow">
			<input type="checkbox" id="toggle--push--glow" class="toggle--checkbox">
			<label class="toggle--btn" for="toggle--push--glow" data-label-on="on" data-label-off="off"></label>
		</div>

		<!-- Inspiration – https://dribbble.com/shots/525358-Buttons-Lights-Shadows?list=searches&tag=toggle_button&offset=10 -->
		<h2 class="headingOuter">Physical Toggle Switch</h2>
		<div class="toggle toggle--knob">
			<input type="checkbox" id="toggle--knob" class="toggle--checkbox">
			<label class="toggle--btn" for="toggle--knob"><span class="toggle--feature" data-label-on="on"  data-label-off="off"></span></label>
		</div>

		<!-- Inspiration – https://dribbble.com/shots/96984-MIT-Sloan-iPad-App-High-Resolution?list=searches&tag=toggle&offset=11 -->
		<h2 class="headingOuter">Sliding Switch Toggle</h2>
		<div class="toggle toggle--switch">
			<input type="checkbox" id="toggle--switch" class="toggle--checkbox">
			<label class="toggle--btn" for="toggle--switch"><span class="toggle--feature" data-label-on="on"  data-label-off="off"></span></label>
		</div>

		<!-- Inspiration – https://codepen.io/NobodyRocks/pen/qzfoc -->
		<h2 class="headingOuter">Neon Text toggle</h2>
		<div class="toggle toggle--neon">
			<input type="checkbox" id="toggle--neon" class="toggle--checkbox">
			<label class="toggle--btn" for="toggle--neon" data-label-on="on" data-label-off="off"></label>
		</div>

	</body>

</html>